<template>
    <div>
        <div id="title">
            <div class="left" @click="$router.back()">
                <van-icon id="iconcccon" color="#fff" size="16" name="arrow-left" />
            </div>
            <div class="box1">城市列表</div>
            <div class="box2"></div>
        </div>
      <van-index-bar v-for="(item,index) in ABCList" :key="index" id="CityList">

        <van-index-anchor v-for=""  :index="item" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />

        <!-- <van-index-anchor index="B" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" /> -->

      </van-index-bar>
    </div>
</template>

<script>
import {getCityList} from "@/api/cityList"
export default {
    props: {

    },
    data() {
        return {
          params:{
            level: 1
          },
          ABCList:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
          obj:{
            A:[],
            B:[],
            C:[],
            D:[],
            E:[],
            F:[],
            G:[],
            H:[],
            I:[],
            J:[],
            K:[],
            L:[],
            M:[],
            N:[],
            O:[],
            P:[],
            Q:[],
            R:[],
            S:[],
            T:[],
            U:[],
            V:[],
            W:[],
            X:[],
            Y:[],
            Z:[],
          },
          arrA:[]
        };
    },
    components: {

    },
    created() {
      this.getCityList()
    },
    methods: {
      async getCityList() {
        const cityList = await getCityList(this.params)
          console.log(cityList.body);
          for( var i = 65; i <= 90; i++) {
            for ( var j = 0; j <= cityList.body.length; j++) {

            }
          }
        const arr = cityList.body.filter((item,index) => {
          console.log(item.pinyin,index);
          if (item.pinyin.startsWith("a")) {
            this.arrA.push(item.label)
            
          }  
        })
        console.log(this.arrA);
        
      }
    },
    computed: {

    },

    mounted() {

    },
    watch: {

    },
};
</script>

<style scoped>
#CityList {
  margin-top: 45px;
}
#title {
    width: 100%;
    height: 45px;
    background-color: #21b97a;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
}
#title .left {
    flex: 1;
    line-height: 45px;
}
#title #iconcccon {
    margin-left: 16px;
}
#title .box1 {
    text-align: center;
    color: #fff;
    line-height: 45px;
    flex: 1;
}
#title .box2 {
    flex: 1;
}
</style>
